<template>
    <div class="panel">
        <div class="center">
            <form action="#" method="POST">
                <div class="tishi">
                    <div class="tishibiao" id="biao"></div>
                    <span id="msg"></span>
                </div>
                <div class="d1">
                    <div class="yhm"></div>
                    <input type="text" value="" id="uname" name="uname" placeholder="邮箱/手机号" autocomplete="off">
                </div>
                <div class="d1">
                    <div class="mm"></div>
                    <input type="password" id="upwd" name="upwd" placeholder="密码">
                </div>
                <div class="d3 clearfloat">
                    <input type="checkbox" checked>
                    <span>自动登录</span>
                    <span>
                        <a class="clearfloat" href="forget.html">忘记密码？</a>
                    </span>
                </div>
                <input class="anniu" type="button" id="btn" value="登录" @click="login">
            </form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{}
    },
    methods:{
        login(){
            var _uname = document.getElementById("uname").value;
            var _upwd = document.getElementById("upwd").value;
            var msg = document.getElementById("msg");
            if(_uname != "admin"){
                msg.innerHTML="不是管理员！！"
                return
            }
            this.axios.post('/login',`uname=${_uname}&upwd=${_upwd}`).then(result=>{
                if(result.data.code==200){
                    this.$toast.success(result.data.message)
                    this.$store.commit('aloginOK',_uname)
                    //保存登录成功状态和用户名
                    sessionStorage.setItem('isalogin', 'true'); 
                    sessionStorage.setItem('ausername', _uname);
                    this.$router.push("/admin/user")
                }else{
                    this.$toast.fail(result.data.message)
                }
            })
        },
    }
}
</script>


<style scoped>
#msg{
    color: red;
}
.panel {
    width: 100%;
    height: 100vh;
    background: url(../../public/img/admin2.jpeg) no-repeat;
}

.center {
    width: 430px;
    /*background-color: #f00;*/
    position: relative;
    top: 30%;
    left: 20%;
    box-sizing: border-box;
    padding-left: 50px;
}

.d1>.yhm {
    width: 28px;
    height: 28px;
    background-image: url(../assets/uname.png);
    position: absolute;
    top: 34px;
    left: 55px;
}

.d1>.mm {
    width: 28px;
    height: 28px;
    background-image: url(../assets/pwd.png);
    position: absolute;
    top: 94px;
    left: 55px;
}

.d1>input {
    box-sizing: border-box;
    height: 46px;
    width: 330px;
    border: none;
    border-radius: 5px;
    margin-bottom: 13px;
    font-size: 16px;
    outline: none;
    padding-left: 38px;
}

.code_show>input {
    box-sizing: border-box;
    height: 46px;
    width: 190px;
    border: none;
    border-radius: 5px;
    margin-bottom: 13px;
    margin-right: 10px;
    font-size: 16px;
    outline: none;
    float: left;
    /* background: url("../assets/Code.png"); */
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 5px 9px;
    text-indent: 2.3em;
}

.code_show>img {
    height: 46px;
    width: 130px;
    border-radius: 3px;
    float: left;
}

.d3 {
    width: 330px;
    height: 22px;
    margin: 0px 10px 10px 10px;
}

.d3>input {
    width: 22px;
    height: 22px;
}

.d3>span {
    vertical-align: top;
    font-size: 14px;
    color: #b0b9c4;
}

.d3>span>a {
    float: right;
    line-height: 22px;
    color: #b0b9c4;
}

.anniu {
    width: 330px;
    height: 46px;
    border: 0;
    border-radius: 3px;
    background: #1755fe;
    color: #fff;
    font-size: 18px;
}

.anniu:hover {
    background: #04f;
}

.tishi {
    width: 330px;
    height: 25px;
    box-sizing: border-box;
    padding: 0 5px 5px 5px;
}

.tishi>.tishibiao {
    display: inline-block;
    width: 20px;
    height: 20px;
    /*background-color: #f00;*/
    /*background-image: url(./img/wr_left.png);*/
}

.tishi>span {
    color: #fff;
    vertical-align: top;
    font-size: 14px;
}
</style>

